<template>
  <div ref="chart" class="charts chart-pie"></div>
</template>

<script>
export default {
  name: 'verticalColumn',
  props: {
    eventTypeTop: {
      type: Object
    }
  },
  watch: {
    eventTypeTop(newVal) {
      console.log(newVal)
      this.eventTypeTop = newVal
      this.gettoptype()
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.gettoptype()
    })
  },
  methods: {
    gettoptype() {
      const chart = this.$refs.chart
      if (chart) {
        const myChart = this.$echarts.init(chart)
        var data = this.eventTypeTop.list[0]
        var className = this.eventTypeTop.category
        var colorList = ['#3CBDD0', '#3B71DA', '#E2AB56', '#E28556', '#3B99DA']
        var bgcolorList = [
          'rgba(60,189,208, .1)',
          'rgba(59,113,218,.1)',
          'rgba(226,171,86,.1)',
          'rgba(226,133,86,.1)',
          'rgba(59,153,218,.1)'
        ]
        var defaultData = this.eventTypeTop.list[1]
        const option = {
          grid: {
            left: '5%',
            right: '5%',
            bottom: '5%',
            top: '5%',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'none'
            },
            formatter: function (params) {
              return (
                params[0].name +
                '<br/>' +
                "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
                // params[0].seriesName + ' : ' + Number((params[0].value.toFixed(4) / 10000).toFixed(2)).toLocaleString() + ' <br/>'
                params[0].seriesName +
                ' : ' +
                params[0].value
              )
            }
          },
          xAxis: {
            show: false,
            type: 'value'
          },
          yAxis: [
            {
              type: 'category',
              inverse: true,
              axisLabel: {
                show: true,
                textStyle: {
                  color: 'rgb(127, 127, 127)',
                  fontSize: '12'
                }
              },
              splitLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLine: {
                show: false
              },
              data: className
            },
            {
              type: 'category',
              inverse: true,
              axisTick: 'none',
              axisLine: 'none',
              show: true,
              axisLabel: {
                textStyle: {
                  color: 'rgb(127, 127, 127)',
                  fontSize: '12'
                },
                formatter: function (value) {
                  return value
                }
              },
              data: data
            }
          ],
          series: [
            {
              name: '',
              type: 'bar',
              zlevel: 1,
              itemStyle: {
                normal: {
                  barBorderRadius: 8,
                  color: params => {
                    return colorList[params.dataIndex]
                  }
                }
              },
              barWidth: 10,
              data: data
            },
            {
              name: '背景',
              type: 'bar',
              barWidth: 10,
              barGap: '-100%',
              data: defaultData === 0 ? 10 : defaultData,
              itemStyle: {
                normal: {
                  color: params => {
                    return bgcolorList[params.dataIndex]
                  },
                  barBorderRadius: 8
                }
              }
            }
          ]
        }
        myChart.setOption(option)
        window.addEventListener('resize', function () {
          myChart.resize()
        })
      }
    }
  }
}
</script>

<style scoped>
.charts {
  width: 100%;
  height: 430px;
}
</style>
